Web App Manifest: Din Guide til Konfiguration af Progressive Web Apps

Web App-manifestet er en JSON-fil, der giver information om din webapplikation til browsere og operativsystemer. Denne information bruges, når appen installeres på en brugers enhed, og definerer, hvordan den fremstår og opfører sig som en Progressiv Web App (PWA). Tænk på det som den plan, der omdanner dit website til en installerbar, app-lignende oplevelse. Et velkonfigureret manifest er afgørende for brugerengagement og synlighed.

Hvad er en Progressiv Web App (PWA)?

Før vi dykker ned i Web App-manifestet, lad os opsummere, hvad en PWA er. PWA'er er webapplikationer, der tilbyder en app-lignende oplevelse til brugerne. De er:

• Pålidelige: Indlæses øjeblikkeligt og fungerer offline eller på netværk med lav kvalitet takket være service workers.
• Hurtige: Reagerer hurtigt på brugerinteraktioner med glidende animationer og uden hakkende scrolling.
• Engagerende: Tilbyder en fordybende brugeroplevelse med funktioner som push-notifikationer og muligheden for at blive installeret på hjemmeskærmen.

Web App-manifestets Rolle

Web App-manifestet er hjørnestenen i en PWA. Det giver de nødvendige oplysninger for, at browsere kan:

• Installere PWA'en: Det gør det muligt for brugere at installere webappen på deres enheder og tilføje den til deres hjemmeskærm eller app-starter.
• Vise PWA'en korrekt: Det definerer appens navn, ikoner, temafarve og andre visuelle aspekter.
• Styre PWA'ens adfærd: Det specificerer, hvordan appen skal starte (f.eks. i fuldskærmstilstand eller som et selvstændigt vindue), og hvordan den skal integreres med operativsystemet.

Oprettelse af Din `manifest.json`-fil

Web App-manifestet er en JSON-fil, typisk navngivet `manifest.json`. Den skal placeres i rodmappen på din webapplikation. Her er et grundlæggende eksempel:

            {
  "name": "Min Fantastiske PWA",
  "short_name": "Fantastisk PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
            

              
                Copy
              
            
          

Lad os gennemgå hver af disse egenskaber:

`name`

Det fulde navn på din webapplikation. Dette navn vil blive vist for brugerne, når de bliver bedt om at installere appen, og i app-starteren.

Eksempel:

            "name": "Global Nyhedsapp"
            

              
                Copy
              
            
          

`short_name`

En kortere version af din apps navn, som bruges, når der er begrænset plads, f.eks. på hjemmeskærmen eller i app-starteren. Hold det kortfattet.

Eksempel:

            "short_name": "Global Nyheder"
            

              
                Copy
              
            
          

`start_url`

Den URL, som appen skal indlæse, når den startes. Det er normalt forsiden på din webapplikation, men det kan også være en specifik landingsside.

Eksempel:

            "start_url": "/"
            

              
                Copy
              
            
          

Du kan også bruge en URL med forespørgselsparametre for at spore, hvordan brugere starter din PWA:

            "start_url": "/?utm_source=homescreen"
            

              
                Copy
              
            
          

`display`

Definerer, hvordan appen skal vises, når den startes. Der er flere muligheder:

• `standalone`: Appen åbner i sit eget top-level vindue uden browserens UI-elementer som adresselinjen.
• `fullscreen`: Appen vil fylde hele skærmen og endda skjule statuslinjen.
• `minimal-ui`: Ligner `standalone`, men giver et minimalt browser-UI, såsom en tilbage-knap og en genindlæs-knap.
• `browser`: Appen åbner i en normal browserfane eller et vindue.

Anbefaling: `standalone` er generelt den foretrukne mulighed for PWA'er.

Eksempel:

            "display": "standalone"
            

              
                Copy
              
            
          

`background_color`

Baggrundsfarven på appens startskærm, når den startes. Dette er vigtigt for at give en glidende overgang mellem app-ikonet og appens indhold.

Eksempel:

            "background_color": "#ffffff"
            

              
                Copy
              
            
          

`theme_color`

Temafarven, der bruges til at style appens UI, såsom statuslinjen på Android. Denne farve bør matche din apps branding.

Eksempel:

            "theme_color": "#000000"
            

              
                Copy
              
            
          

`icons`

En række objekter, hvor hvert objekt repræsenterer et ikon for appen. Du bør levere flere ikoner i forskellige størrelser for at sikre, at appen ser godt ud på forskellige enheder og opløsninger.

Egenskaber for hvert ikon:

• `src`: URL'en til ikonbilledet.
• `sizes`: Dimensionerne på ikonet i pixels (f.eks. "192x192").
• `type`: MIME-typen for ikonbilledet (f.eks. "image/png").

Anbefalede ikonstørrelser:

• 48x48
• 72x72
• 96x96
• 144x144
• 192x192
• 512x512

Eksempel:

            "icons": [
  {
    "src": "/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]
            

              
                Copy
              
            
          

Yderligere Manifest-egenskaber

Mens ovenstående egenskaber er de mest almindelige, understøtter Web App-manifestet mange andre muligheder for at konfigurere din PWA:

`id`

En unik identifikator for din PWA. Dette er vigtigt for at undgå konflikter, hvis du har flere PWA'er med samme navn.

Eksempel:

            "id": "com.example.myapp"
            

              
                Copy
              
            
          

`scope`

Definerer appens navigationsomfang. Dette bestemmer, hvilke URL'er inden for dit website, der betragtes som en del af PWA'en. Hvis brugeren navigerer uden for dette omfang, åbnes appen i en normal browserfane.

Eksempel:

            "scope": "/app/"
            

              
                Copy
              
            
          

I dette eksempel vil kun URL'er, der starter med `/app/`, blive betragtet som en del af PWA'en.

`orientation`

Specificerer den foretrukne skærmorientering for appen. Mulighederne inkluderer `portrait`, `landscape`, `any` og flere.

Eksempel:

            "orientation": "portrait"
            

              
                Copy
              
            
          

`related_applications`

En række objekter, der definerer relaterede native applikationer. Dette giver dig mulighed for at promovere dine native apps til brugere, der allerede har installeret din PWA.

Eksempel:

            "related_applications": [
  {
    "platform": "play",
    "id": "com.example.myapp"
  }
]
            

              
                Copy
              
            
          

Dette eksempel indikerer, at der findes en relateret native app i Google Play Store med ID'et `com.example.myapp`.

`prefer_related_applications`

En boolesk værdi, der angiver, om brugeren skal opfordres til at installere den relaterede native applikation i stedet for PWA'en.

Eksempel:

            "prefer_related_applications": true
            

              
                Copy
              
            
          

`categories`

En række strenge, der repræsenterer appens kategorier. Dette kan hjælpe brugere med at finde din app i app-butikker eller søgeresultater.

Eksempel:

            "categories": ["nyheder", "information"]
            

              
                Copy
              
            
          

`shortcuts`

Definerer en liste over genveje, som brugere kan tilgå fra app-ikonet på deres hjemmeskærm. Dette giver brugerne mulighed for hurtigt at udføre almindelige opgaver i appen.

Eksempel:

            "shortcuts": [
  {
    "name": "Seneste Nyheder",
    "short_name": "Nyheder",
    "description": "Læs de seneste nyhedsartikler",
    "url": "/news",
    "icons": [{
      "src": "/icons/news.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }
]
            

              
                Copy
              
            
          

Forbindelse af Manifestet til Din Web App

Når du har oprettet din `manifest.json`-fil, skal du linke den til din webapplikation ved at tilføje et ``-tag til ``-sektionen i din HTML:

            <link rel="manifest" href="/manifest.json">
            

              
                Copy
              
            
          

Validering af Dit Manifest

Det er vigtigt at validere din `manifest.json`-fil for at sikre, at den er korrekt formateret og indeholder alle de nødvendige egenskaber. Du kan bruge onlineværktøjer som JSONLint eller Chrome DevTools til at validere dit manifest.

Test af Din PWA

Efter at have oprettet og linket dit manifest, bør du teste din PWA i forskellige browsere og på forskellige enheder for at sikre, at den fungerer som forventet. Brug Chrome DevTools (Application -> Manifest) til at inspicere dit manifest og diagnosticere eventuelle problemer.

Bedste Praksis for Konfiguration af Web App Manifest

Her er nogle bedste praksisser, du bør huske på, når du konfigurerer dit Web App Manifest:

• Angiv alle påkrævede egenskaber: Sørg for, at du har inkluderet alle de væsentlige egenskaber, såsom `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color` og `icons`.
• Brug passende ikonstørrelser: Angiv flere ikoner i forskellige størrelser for at understøtte forskellige enheder og opløsninger.
• Vælg den rigtige visningstilstand: Vælg den `display`-tilstand, der bedst passer til din apps brugeroplevelse. `standalone` er generelt den foretrukne mulighed.
• Valider dit manifest: Valider altid din `manifest.json`-fil for at sikre, at den er korrekt formateret.
• Test din PWA: Test din PWA i forskellige browsere og på forskellige enheder for at sikre, at den fungerer som forventet.
• Optimer til SEO: Brug relevante nøgleord i dit `name`, `short_name` og `description` for at forbedre din apps synlighed.
• Overvej lokalisering: Hvis din app henvender sig til et globalt publikum, bør du overveje at levere lokaliserede versioner af dit manifest med forskellige navne, beskrivelser og ikoner for forskellige sprog.

Eksempler på Velkonfigurerede Web App Manifester

Her er et par eksempler på velkonfigurerede Web App Manifester fra populære PWA'er:

Twitter Lite

            {
  "name": "Twitter Lite",
  "short_name": "Twitter",
  "icons": [
    {
      "src": "/static/icons/mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1da1f2",
  "description": "Twitter Lite er en hurtigere, datavenlig måde at se, hvad der sker i verden.",
  "orientation": "portrait"
}
            

              
                Copy
              
            
          

Starbucks

            {
  "name": "Starbucks",
  "short_name": "Starbucks",
  "icons": [
    {
      "src": "/static/icons/starbucks-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/starbucks-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f2f0eb",
  "theme_color": "#00704a",
  "description": "Bestil dine yndlings Starbucks-drikke og mad med appen.",
  "orientation": "portrait",
  "shortcuts": [
    {
      "name": "Bestil Nu",
      "short_name": "Bestil",
      "description": "Start en ny bestilling",
      "url": "/order",
      "icons": [{
        "src": "/static/icons/order-icon.png",
        "sizes": "192x192",
        "type": "image/png"
      }]
    }
  ]
}
            

              
                Copy
              
            
          

Fremtiden for Web App Manifest

Web App-manifestet er en standard i udvikling, hvor nye funktioner og muligheder tilføjes over tid. Hold øje med de seneste opdateringer og anbefalinger fra W3C for at sikre, at dine PWA'er udnytter de nyeste teknologier fuldt ud.

Konklusion

Web App-manifestet er en essentiel komponent i enhver PWA. Ved at konfigurere dit manifest korrekt kan du levere en problemfri og engagerende brugeroplevelse, der får din webapp til at føles som en native applikation. Denne guide har givet en omfattende oversigt over Web App-manifestet, herunder dets egenskaber, bedste praksis og eksempler. Ved at følge disse retningslinjer kan du frigøre det fulde potentiale i dine PWA'er og levere en overlegen brugeroplevelse til dine brugere over hele verden.

Omfavn kraften i Web App-manifestet og omdan dine websites til installerbare, app-lignende oplevelser, der glæder brugerne og driver engagement.